<template>
  <div>
    <!-- 头部 -->
    <header class="head flex aic bg-fff">
      <router-link to="/address" class="pl-15">
        <i class="iconfont iconleft"></i>
        <span class="f14">返回</span>
      </router-link>
      <img class="picture" src="@/img/vila.png">
    </header>
    <!-- 图片 -->
    <div>
      <img class="picture" src="@/img/valatu.jpg" alt>
    </div>
    <main class="f12">
      <div class="h46 pt-10 pb-10 ml-5 flex aic">
        <span class="pl-10 color">出 游 类 型</span>
        <p class="flex ml-25">
          <span
            class="ml-10"
            v-for="(item, index) in types"
            :key="index"
            @click="getType(item)"
            :class="{active: item === form.type}"
          >{{item}}</span>
        </p>
      </div>

      <!-- 第二层 -->
      <div class="h46 pt-10 pb-10 ml-5 flex aic">
        <span class="pl-10 color">出 游 人 数</span>
        <p class="flex ml-25">
          <span
            class="ml-10"
            v-for="(item, index) in num"
            :key="index"
            @click="getNum(item)"
            :class="{active: item === form.number}"
          >{{item}}</span>
        </p>
      </div>

      <!-- 第三层 -->
      <div class="h46 pt-20 pb-20 ml-5" @click="show=!show">
        <span class="pl-10 color">出 游 时 间</span>
        <span class="pl-25">{{form.date}}</span>
      </div>
      <!-- 第三层 -->
      <div class="h46 pt-20 pb-20 ml-5">
        <span class="pl-10 color">联 系 姓 名</span>
        <input type="text" v-model="form.name" placeholder="请填写" class="ml-25">
      </div>
      <!-- 第三层 -->
      <div class="h46 pt-20 pb-20 ml-5">
        <span class="pl-10 color">联 系 电 话</span>
        <input type="text" v-model="form.phone" placeholder="请填写" class="ml-25">
      </div>

      <!-- 最后 -->
      <div class="ml-10 mr-10 tou" @click="submit">
        <p class="submission">
          <span class="demand">提交需求</span>
        </p>
      </div>
    </main>

    <van-popup v-model="show" position="bottom" :overlay="false">
      <van-datetime-picker v-model="currentDate" type="date" @confirm="go" @cancel="back"/>
    </van-popup>
    <!-- 底部 -->
    <Footer page="need"></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
export default {
  data() {
    return {
      show: false,
      types: ["家庭", "公司", "同学", "其他"],
      num: ["1-5", "6-10", "10+"],
      currentDate: new Date(),
      form: {
        type: "",
        number: "",
        date: "请选择",
        name: "",
        phone: ""
      }
    };
  },

  methods: {
    // 获取类型
    getType(item) {
      this.form.type = item;
    },

    // 获取人数
    getNum(item) {
      this.form.number = item;
    },

    //选择日期
    go(value) {
      this.show = false;
      let date = new Date(value);
      let Y = date.getFullYear();
      let M = date.getMonth() + 1;
      let D = date.getDate();
      M = M < 10 ? "0" + M : M;
      D = D < 10 ? "0" + D : D;
      this.form.date = `${Y}-${M}-${D}`;
    },

    // 取消选择
    back() {
      this.show = false;
    },

    // 提交需求
    async submit() {
      let url = "/need/submit";
      try {
        let res = await this.$axios.post(url, this.form);
        // console.log(res);
        if (res.code === "666") {
          this.$toast.success("提交成功");
          this.form = {
            type: "",
            number: "",
            date: "请选择",
            name: "",
            phone: ""
          };
        }
      } catch (error) {}
    }
  },
  components: {
    Footer
  }
};
</script>

<style lang="less" scoped>
@import "../style/submitNeed.less";
</style>

